<template>
  <div>
    <el-row>
      <el-col :span="8" v-for="item in 12" :key="item" @click="gotos">
        <img class="imgs" src="@/assets/images/product/gonggao.jpg" alt="" />
        <div class="titles">
          麻花即兴x万达影城｜国庆特惠！「麻花喜剧FUN现场」排期新鲜出炉
        </div>
        <div class="sub">
          麻花即兴，国内最具知名度与影响力的即兴表演和培训品牌，隶属于开心麻花。2015年开心麻花将即兴戏剧引入国内，无剧本的创造演绎，结合开心麻花风格的表演理念和技巧，形成了一套专属即兴戏剧表演和培训体系。提供定制和半定制多元产品，为普通素人、戏剧和表演爱好者、企业和商学院等提供即兴课程学习班、即兴解压工作坊、即兴团建和培训、即兴演出和编剧等内容。
        </div>
        <div class="timer">2023-6-3</div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import router from "../../../router";

// import Footer from "@/layout/components/Footer";
const gotos = () => {
  router.push("/official/details");
};
</script>

<style scoped lang="scss">
.el-row {
  .el-col-8 {
    padding: 0 15px;
    cursor: pointer;
    .imgs {
      width: 100%;
      height: 247px;
      margin-top: 0;
    }

    .titles {
      font-size: 18px;
      // font-family: MiSans-Semibold;
      font-weight: 800;

      color: #292d2d;
      margin: 10px 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      word-break: break-all; // 注意这个文字多行很重要
      -webkit-box-orient: vertical;
    }
    .sub {
      font-size: 16px;
      font-family: MiSans-Light;
      color: #504f4f;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      word-break: break-all; // 注意这个文字多行很重要
      -webkit-box-orient: vertical;
    }
    .timer {
      font-size: 14px;
      font-family: MiSans-Light;
      margin: 10px 0 30px;
      color: #bcbdc0;
    }
  }
}
</style>
